<script lang="ts" setup>
import defaultBanner from '@/home/assets/home/join-banner.png';
import { useAppStore } from '@/settings/stores/index'
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  des: {
    type: String,
    default: '',
  },
  pic: {
    type: String,
    default: '',
  },
  cursor: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(['join', 'close']);
const appStore = useAppStore();
const communityInfo = appStore.config;

const handleClick = () => {
  emit('join', true);
}
const handleClose = () => {
  emit('close');
}
</script>

<template>
  <div class="mx-auto w-600 rounded-6 bg-white pb-40 text-hex-292929 shadow-[0_0_16px_0_rgba(0,0,0,0.10)]">
    <div class="relative">
      <img :data-src="props.pic || defaultBanner" :alt="props.title || communityInfo.name" class="lozad block h-208 w-full object-cover">
      <img src="../assets/mask.svg" class="absolute bottom-0 h-21 w-full">
    </div>
    <h2 class="mt-24 px-40 text-center text-balance text-28 font-semibold leading-40">{{ props.title || communityInfo.name }}</h2>
    <p class="mt-8 px-40 text-center text-20 text-hex-575757 leading-28">{{ props.des || $t('common.communityCard.popup.invite') }}</p>
    <button
      type="button"
      class="mx-auto mt-40 block h-56 w-230 cursor-default rounded-6 bg-primary-1 text-20 text-white font-medium"
      :class="[ props.cursor ? 'cursor-pointer' : 'cursor-default']"
      @click="handleClick"
    >
      {{ $t('common.communityCard.popup.join') }}
    </button>
    <button
      type="button"
      class="mx-auto mt-16 block h-22 rounded-6 bg-transparent text-16 text-hex-ADADAD font-normal"
      :class="[ props.cursor ? 'cursor-pointer' : 'cursor-default']"
      @click="handleClose"
    >
      {{ $t('common.communityCard.popup.cancel') }}
    </button>
  </div>
</template>

<style scoped lang="scss">
</style>
